<template>
  <el-container>
    <el-header><h3>水库视频图像测试demo</h3></el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          @select="selectMenu"
          default-active="device">
          <el-menu-item index="device">
            <i class="el-icon-menu"></i>
            <span slot="title">设备列表</span>
          </el-menu-item>
          <el-menu-item index="img">
            <i class="el-icon-picture"></i>
            <span slot="title">图像</span>
          </el-menu-item>
          <el-menu-item index="video">
            <i class="el-icon-camera-solid"></i>
            <span slot="title">视频</span>
          </el-menu-item>
          <el-menu-item index="camera">
            <i class="el-icon-setting"></i>
            <span slot="title">摄像头管理</span>
          </el-menu-item>
          <el-menu-item index="local">
            <i class="el-icon-setting"></i>
            <span slot="title">下载视频播放</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <device v-if="flag === 'device'"></device>
        <imgItem v-if="flag === 'img'"></imgItem>
        <videoItem v-if="flag === 'video'"></videoItem>
        <cameraManager v-if="flag === 'camera'"></cameraManager>
        <localVideo v-if="flag === 'local'"></localVideo>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import imgItem from '@/components/img-item'
import device from '@/components/device'
import videoItem from '@/components/video-item'
import cameraManager from '@/components/camera-manager'
import localVideo from '@/components/local-video'
export default {
  name: 'home',
  components: { imgItem, videoItem, cameraManager, device, localVideo },
  data () {
    return {
      flag: 'device'
    }
  },
  created () {

  },
  methods: {
    selectMenu (index, indexPath) {
      this.flag = index;
    }
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
  }
  .el-menu-item {
    font-size: 16px;
  }

</style>
